<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业111</title>
		<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<style>
		#di1{
			width: 400px;
			height: 250px;
			background-color: #ffff7f;
			text-align: center;
			line-height: 300px;
			font-size: 30px;
			position: relative;
			top: -1px;
		}
		button{
			width: 80px;
			height: 60px;
			}
		#bt1{
			background-color: #ffff7f;
			border: 1px solid #ffff7f;
			}
	    #bt2{
			border: 1px solid white;
			}
		#bt3{
			border: 1px solid white;
			}
	</style>
	<body> 
		<button id="bt1">tab1</button>
		<button id="bt2">tab2</button>
		<button id="bt3">tab3</button>
		<div id="di1">tab文字1</div>
		<script>
		$("#bt1").click(function(){
			$("#di1").text("内容1");
			$("#bt1").css("background-color","#ffff7f");
			$("#bt1").css("border","1px solid white");
			$("#bt2").css("background-color","#e9e9ed");
			$("#bt3").css("background-color","#e9e9ed");
		 });
		 $("#bt2").click(function(){
             $("#di1").text("内容2");
			 $("#bt2").css("background-color","#ffff7f");
			 $("#bt2").css("border","1px solid white");
			 $("#bt1").css("background-color","#e9e9ed");
			 $("#bt3").css("background-color","#e9e9ed");
		   });
		$("#bt3").click(function(){
		    $("#di1").text("内容3");
			$("#bt3").css("background-color","#ffff7f");
			$("#bt3").css("border","1px solid white");
			$("#bt1").css("background-color","#e9e9ed");
			$("#bt2").css("background-color","#e9e9ed");
		  });
		</script>
	</body>
</html>